<template>
	
     <view  v-html="askShow"  style="overflow-x: auto;"></view> 
	
</template>

<script>
	
	export default {
	
		props: ["defaultAsk","posId","isStop"],
		data() {
			return {
				askShow:""
			}
		},

		watch: {
			defaultAsk: {
				immediate: true,
				handler(newValue, oldValue) {
					console.log("defaultAsk", this.defaultAsk)
					this.startTyping(this.defaultAsk,this.posId)
				}
			},
		},

		methods: {
			
			startTyping(text,posId) {
			
			  if(text==null){
				  return;
			  }
				
			  let currentIndex = 0;
			  const typingSpeed = 40; // 打字速度，单位：毫秒
			  let currentStr = "";
			  let time=0;
			  this.askShow=""
			
			  const timer = setInterval(() => {
				  
				  //阻止进入
				   if (currentIndex >= text.length) {
					  return
				   }
				  
					if(this.isChineseChar(text[currentIndex])){
						//终止打字输出 快速输出剩下的文字
						if(this.isStop){
							clearInterval(timer);
						  	this.isStop=false;
						  	this.askShow += text.substring(currentIndex);
							this.$emit("scrollTopTo",this.posId);	
							currentIndex=text.length;//确保此后不要再度进入 防止clearInterval清除不及时
							return //确保本次也不要再往下执行
						}else{
							currentStr+=text[currentIndex]
							this.askShow += currentStr;
							currentStr="";
						}
						
					}else{
						currentStr+=text[currentIndex]
					}
					
					
					time++
					//触发父元素滚动
					if(time>=30){
						this.$emit("scrollTopTo","");
						time=0
					}
					
					currentIndex++;
					if (currentIndex >= text.length) {
						 this.askShow += currentStr;
						 currentStr="";
						 this.$emit("scrollTopTo",this.posId);
					     clearInterval(timer);
					}
				
			
			  }, typingSpeed);
			},
			
			isChineseChar(str) {
			  return /^[\u4e00-\u9fa5]$/.test(str);
			}
			
		}
	}
</script>


